<template>
  <div class="content" style="position: relative">
    <dc-header :title="'门店切换'" :icon="'icon-header-back'"></dc-header>
    <div class="head-top">
      <div class="search-box">
        <div @click = 'gosearch' class="search-content bg-white">
          <i class="iconfont icon-ic_sousuo"></i>
          搜索门店
        </div>
      </div>
    </div>
    <dc-row class="item" type="flex" justify="start">
      <dc-col span="10" class="left-list content-body">
        <div data-id='0' @click="togglelist" class="rightcell mix1px"
             v-bind:class="{'active' : leftlisttoggleType == 0}">
          全部门店
        </div>
        <div>
          <div data-id='1' @click="togglelist" v-bind:class="{'active' : leftlisttoggleType == 1}"
               class="rightcell mix1px">
            经营模式
            <i class="iconfont"
               v-bind:class="{'icon-right': !(leftlisttoggleType == 1),'icon-down': leftlisttoggleType == 1}"></i>
          </div>
          <div v-if="leftlisttoggleType == 1">
            <div class="left-list-itembox" v-for="item in businessModelList" :key="item.storeNum"
                 @click="getList(item.businessModelName,'', item.businessModelName, item, businessModelList, {'businessModelName': item.businessModelName})">
              <span
                v-bind:class="{'active' : item.active}">{{item.businessModelName}}</span>
            </div>
          </div>
        </div>
        <div>
          <div data-id='2' @click="togglelist" v-bind:class="{'active' : leftlisttoggleType == 2}"
               class="rightcell mix1px">
            城市
            <i class="iconfont"
               v-bind:class="{'icon-right': !(leftlisttoggleType == 2),'icon-down': leftlisttoggleType == 2}"></i>
          </div>
          <div v-if="leftlisttoggleType == 2">
            <div class="left-list-itembox" v-for="item in cityList" :key="item.cityCode"
                 @click="getList('', item.cityCode, item.cityName, item, cityList, {'cityCode': item.cityCode})">
              <span v-bind:class="{'active' : item.active}">{{item.cityName}}</span>
            </div>
          </div>
        </div>
      </dc-col>
      <dc-col span="14" class="content-body right-list">
        <div @click = 'choosethisStore({"storeName" : "全部" + region + "门店"},[])' class="rightcell" v-bind:class="{'active' : !store.storeCode&&store.storeName === ('全部' + region + '门店')}">
        <!-- <div class="rightcell active"> -->
          全部{{region}}门店
        </div>
        <div @click='choosethisStore(itemer, storeList, index)' :key="itemer.storeCode"
             v-for="(itemer, index) in storeList" class="rightcell" v-bind:class="{'active' : itemer.storeCode === store.storeCode}">
          {{itemer.storeName}}
        </div>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import Vue from 'vue';
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import {mapMutations, mapGetters, mapActions} from 'vuex';
  import mintUi from '@/common/mintUi';
  import api from '../../common/api/shopAlter';
  import loginApi from '@/common/api/login';
  /**
   * shopAlter
   * @namespace components/shop/shopAlter
   * @description 点击跳回以后从vuex的store里面取的相关信息，
   */
  export default {
    data () {
      return {
        isChangeShop: false,
        businessModelList: [],
        cityList: [],
        storeList: [],
        leftlisttoggleType: 0,
        region: '',
        activeRegion: '',
        mode: {}
      };
    },
    created () {
      this.getShopAlterListAPI();
    },
    activated () {
      this.isChangeShop = false;
      this.leftlisttoggleType = 0;
      // this.getShopAlterListAPI();
    },
    computed: {
      ...mapGetters(['store'])
    },
    methods: {
      ...mapActions({'removeMode': 'removeMode', setPermission: 'setPermission'}),
      ...mapMutations({setStore: 'SETSTORE', setMode: 'SETMODE'}),
      //一级左侧列表点击切换
      togglelist (e) {
        this.leftlisttoggleType = e.target.dataset.id;
        if (e.target.dataset.id === '0') {
          this.getShopAlterListAPI();
          this.region = '';
          this.mode = {};
        }
      },
      //初始化全部门店api
      getShopAlterListAPI () {
        api.getShopAlterList(this.store.groupCode).then(res => {
          this.businessModelList = res.businessModelList || [];
          this.cityList = res.cityList || [];
          this.storeList = res.storeList || [];
        });
      },
      //全部门店点击获取门店fn
      getList (mode, city, name, item, subList, param) {
        this.mode.modeName = mode;// 存储经营模式/城市id
        this.mode.cityCode = city;// 存储经营模式/城市id
        this.region = name;// 更改右边最上边列表 “全部XX门店”
        this.setActive(item, subList);
        param.groupCode = this.store.groupCode;
        api.getShopList(param).then(res => { //点击单个选项获取店铺列表api
          this.storeList = res || [];
        });
      },
      setActive (item, list, index) { // 更改二级列表选中状态
        if (list) {
          list.forEach(function (subTile) {
            subTile.active = false;
          });
          item.active = true;
          Vue.set(list, index, item);//Vue 不能检测变动的数组
        }
      },
      choosethisStore (item, storeList, index) {
        this.activeRegion = this.region;
        if (!this.isChangeShop) { //防止双击出现返回两次上一级页面的问题
          this.isChangeShop = true;
          this.setActive(item, storeList, index);
          mintUi.openToast('成功切换门店!');
          item.storeName = item.storeName || '全部门店';
          this.setStore(item);
          if (item.storeName === '全部' + this.region + '门店') {
            this.setMode(this.mode);
            loginApi.getResources(1).then(res => {
              this.setPermission(res);
            });
          } else {
            loginApi.getResources(3).then(res => {
              this.setPermission(res);
            });
            this.removeMode();
          }
          this.$router.go(-1);
        }
      },
      gosearch () {
        this.$router.push('/searchShop');
      }
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .item {
    font-size: px2rem(30px);
    text-align: left;
    height: calc(100% - 94px);
    color: #333;
  }

  .left-list {
    overflow-y: auto;
    position: absolute;
    /*bottom: 0;*/
    height: calc(100%);
    top: px2rem(0px);
    //left: 0;
  }

  .right-list {
    @extend .left-list;
    right: 0;
    background: #fff;
  }

  .rightcell {
    line-height: px2rem(100px);
    padding: 0 px2rem(24px);
    &:before {
      background-color: #e6e6e6;
    }
    i.icon-right, i.icon-down {
      color: #999;
      float: right;
    }
  }

  .left-list-itembox {
    padding-left: px2rem(40px);
    background: #fff;
    line-height: px2rem(100px);
  }

  .active {
    background: #fff;
    color: $theme-color;
    &:before {
      background-color: #fff;
    }
  }

  .search-box {
    width: 100%;
    box-sizing: border-box;
    height: px2rem(100px);
    padding: px2rem(15px) px2rem(24px);
    color: #999;
    font-size: px2rem(28px);
    background: #f2f2f2;
    .search-content {
      border-radius: 4px;
      text-align: center;
      line-height: px2rem(64px);
    }
  }
</style>


